<template id="card-component-template">
  <style>
    :host {
      display: block;
    }
  </style>
  <div class="base" part="base">
    <div part="header">
      <slot name="header_slot"></slot>
    </div>
    <div part="body">
      <slot name="body_slot"></slot>
    </div>
    <div part="footer">
      <slot name="footer_slot"></slot>
    </div>
  </div>
</template>

<card-component>
  <p slot="header_slot">这是卡片头部</p>
  <p slot="body_slot">这是卡片主体</p>
  <p slot="footer_slot">这是卡片尾部</p>
</card-component>

<script type="module">
  customElements.define(
    "card-component",
    class extends HTMLElement {
      constructor() {
        super(); // 在构造函数中总是先调用 super
        const cardComponent = document.getElementById(
          "card-component-template",
        ).content;
        const shadowRoot = this.attachShadow({
          mode: "open",
        });
        shadowRoot.appendChild(cardComponent.cloneNode(true));
      }
    },
  );
</script>

<style>
  ::part(body) {
    color: red;
    font-style: italic;
  }
</style>
